<template>
  <div class="orders">
    <mianbaoxie />
    <el-card class="box-card">
      <div style="margin-bottom: 15px;">
        <el-input placeholder="请输入内容" v-model="paging.query" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="serch"></el-button>
        </el-input>
      </div>
      <el-table :data="orderslist" border style="width: 100%">
        <el-table-column prop="#" label="#" type="index"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="600"></el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="80"></el-table-column>
        <el-table-column label="是否付款" width="80">
          <template slot-scope="scope">
            <el-tag type="danger">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="80"></el-table-column>
        <el-table-column prop="create_time" label="下单时间" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="modification(scope.row)"></el-button>
            <el-button type="success" size="mini" icon="el-icon-location-outline" @click="kanlogistics(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="paging.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import mianbaoxie from "../components/mianbaoxie.vue";
import { initorders, logistics } from "@/ulits/api/orders";
export default {
  components: { mianbaoxie },
  name: "orders",
  data() {
    return {
      // 分页  搜索
      paging: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      // 总页数
      total: 0,
      // 初始数据
      orderslist: [],
    };
  },
  created() {
    // 初始haul页面
    initorders(this.paging).then((res) => {
      this.Message(res);
      this.total = res.data.total;
      this.orderslist = res.data.goods;
    });
  },
  methods: {
    // 每页有几条
    handleSizeChange(val) {
      this.paging.pagesize = val;
      this.updataorders();
    },
    // 当前页
    handleCurrentChange(val) {
      this.paging.pagenum = val;
      this.updataorders();
    },
    // 搜索
    serch() {
      this.updataorders();
    },
    // 修改地址
    modification(row) {
      console.log(row);
    },
    kanlogistics(row) {
      console.log(row);
      // logistics(row.create_time).then((res) => {
      //   console.log(res);
      // });
    },
    // 时间转换
    dateFormat(row, column) {
      var moment = require("moment");
      var date = row[column.property];
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 获取数据
    updataorders() {
      initorders(this.paging).then((res) => {
        this.orderslist = res.data.goods;
        this.total = res.data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.orders {
  .box-card {
    .el-input-group {
      width: 40%;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
}
</style>